<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧导航菜单-vue版本</title>
</head>
<body>
<div id="app">

    <ul>
        <li v-for="(nav,index) in navs" @click="navClick(index)">
             {{nav.name}}
             <ul v-show="!nav.collapse">
                 <li v-for="inner in nav.children">
                     {{inner.name}}
                 </li>
             </ul>
        </li>
    </ul>

</div>
</body>
<script src="../../lib/vue.js"></script>
<script src="../../mock/cities.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            navs: cities
        },methods:{
            navClick:function (index) {
               this.navs[index].collapse =  !this.navs[index].collapse; // 数据的状态
            }

        }
    })

</script>
</html>